.heatmap-container {
	width: 600px;
	height: 400px;
	border: 1px solid #ccc;
	position: relative;
}

.heatmap {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}

.square {
	width: 10px;
	height: 10px;
	margin: 1px;
	cursor: pointer;
}

.square.active {
	background-color: #ff5722;
}

.square.highlight {
	border: 2px solid green;
	background-color: green;
}

.square.selected {
	background-color: #3f51b5;
}

.selection-info,
.percentage-info {
	margin-top: 10px;
}